<template>
	<!-- 单双休设置 -->
    <div class="singleDoubleRestSet">
      <el-breadcrumb separator="/" class="bread-title">
           <el-breadcrumb-item :to="{ path: '/attendanceManagement' }">考勤人员管理</el-breadcrumb-item>
           <el-breadcrumb-item>单双休设置</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="singleDoubletabs" style="margin: 20px 0">
            <el-button :type="active == 1 ? 'primary' : 'default' " @click="btnClick(1)">双休</el-button>
            <el-button :type="active == 2 ? 'primary' : 'default' " @click="btnClick(2)">单休</el-button>
      </div>
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="ruleForm.nameOrMobileOrJobnumber" placeholder="姓名/手机号/员工号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchlist" id="monitorEnter">搜索</el-button>
          <el-button type="primary" @click="batch">批量修改</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 70%">
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column label="姓名" prop="userName" align="center"></el-table-column>
            <el-table-column label="员工号" prop="jobNumber" align="center"></el-table-column>
            <el-table-column label="手机号" prop="mobile" align="center"></el-table-column>
            <el-table-column label="休息设置" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="edithander(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
      </el-table>
      <div class="pagebar">
          <el-pagination
                  background
                  layout="total, sizes, prev, pager, next"
                  :current-page.sync="ruleForm.pageNum"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="ruleForm.pageSize"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :total="totalSize">
          </el-pagination>
      </div>
      <el-dialog title="批量修改" :visible.sync="dialogFormVisible"  v-if='dialogFormVisible'
 width="550px">
          <el-transfer
            filterable
            :filter-method="filterMethod"
            filter-placeholder="搜索名"
            :titles="titlesarr"
            v-model="selectdata"
            target-order="original"
            :data="alldata"
            :props="{
              key:'userId',
              label:'userName'
            }"
            >
          </el-transfer>
          <div slot="footer" class="dialog-footer" style="text-align: center">
            <el-button type="primary" @click="ensurehander(1)">确认</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
          </div>
      </el-dialog>
      <el-dialog
        title=""
        :visible.sync="dialogVisible"
        width="25%"
        center
        >
        <div style="text-align: center">
          <el-radio-group v-model="labelType">
            <el-radio :label="0">单休</el-radio>
            <el-radio :label="1">双休</el-radio>
          </el-radio-group>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="ensurehander(2)">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>
<script>

import api from "@/api/apiPath"
export default {
    name:"singleDoubleRestSet",
    data() {
        return {
           active:1,//1双休 2单休
           ruleForm:{
             nameOrMobileOrJobnumber:undefined,
             restStatus:1,//0单休 1 双休
             pageNum: 1,
             pageSize: 10,
           },
           alldata:[],
           selectdata:[],
           titlesarr:['双休', '单休'],
           tableData:[],
           totalSize: 0,
           allstaffdata:[],
           selectstaffdata:[],
           dialogFormVisible:false,
           dialogVisible:false,
           labelType:undefined,
           currenteidt:{},
           filterMethod(query, item) {
               return item.userName.indexOf(query) > -1;
           }
        }
    },
    created() {
      this.getlist()
    },
    methods: {
      searchlist(){
         this.ruleForm.pageNum = 1
         this.getlist()
      },
      handleCurrentChange() {
          this.getlist()
      },
      handleSizeChange(val) {
          this.ruleForm.pageSize = val
          this.getlist();
      },
      btnClick(type){
        this.ruleForm.nameOrMobileOrJobnumber =''
        this.selectdata = []
        this.active = type
         if (this.active == 1) {
           this.titlesarr = ['双休', '单休']
           this.ruleForm.restStatus=1

         }else {
           this.titlesarr = ['单休', '双休']
           this.ruleForm.restStatus=0
         }
        //列表数据
        this.ruleForm.pageNum = 1
        this.getlist();
      },
      //批量修改
      batch(){
        this.selectdata = []
        this.dialogFormVisible = true
        this.$axios.post('/checkin/user/attendance/list',{pageNum:1,pageSize:9999999,restStatus:this.ruleForm.restStatus}).then(res=>{
          this.alldata = res.list
        })
      },
      getlist(){
        this.$axios.post('/checkin/user/attendance/list',this.ruleForm).then(res=>{
          this.tableData = res.list
          this.totalSize = res.total
        })
      },
      edithander(val){
        this.dialogVisible = true
        this.labelType = val.restStatus
        this.currenteidt = val
      },
      ensurehander(type){
          let obj = {}
          if (type == 1) {
              if (this.selectdata.length == 0) {
                  this.$message({
                    message:'请选择要修改的人员',
                    type:'warning'
                  })
                  return
              }
              if (this.active == 1) {
                obj['single'] = this.selectdata
                obj['pairs'] =[]
              }else {
                obj['pairs'] = this.selectdata
                obj['single'] =[]
              }
          }else {
            //双休界面
            if (this.active == 1) {
                //单选为单休
                if (this.labelType == 0) {
                  obj['single'] =[]
                  obj['single'].push(this.currenteidt.userId)
                  obj['pairs'] =[]
                }else{
                  obj['pairs'] = []
                  obj['pairs'].push(this.currenteidt.userId)
                  obj['single'] =[]
                }
            }else {
                //单休界面 单选为双休
                if (this.labelType == 1) {
                  obj['pairs'] = []
                  obj['pairs'].push(this.currenteidt.userId)
                  obj['single'] =[]
                }else{
                  obj['single'] =[]
                  obj['single'].push(this.currenteidt.userId)
                  obj['pairs'] =[]
                }
            }
          }
         this.$axios.post('checkin/user/attendance/updaterest',obj).then(res=>{
            this.$message({
              message:'设置成功',
              type:'success'
            })
            this.dialogVisible = false
            this.dialogFormVisible = false
            this.getlist()
         })
      }
    },
}
</script>
<style lang="stylus" >

   .singleDoubletabs .el-button 
      padding: 15px 50px !important

  .singleDoubleRestSet 
    .el-transfer 
        .el-transfer-panel__body
          .el-checkbox, .el-checkbox__input
            display: block !important

</style>